<script setup lang="ts">
import { useSound } from '@vueuse/sound'
import correctAnswerSfx from '@/assets/sound/correct_answer.mp3'

const { play } = useSound(correctAnswerSfx)

const intro = useIntro({
  steps: [
    {
      element: '#entryApp',
      intro: '打开剪映应用',
    },
  ],
}, [
  {
    target: 'entryApp',
    posotionCallback(info: DOMRect) {
      return { x: info.left + 20, y: info.top + 30 }
    },
  },
])


const set1 = setTimeout(() => {
  intro.start()
}, 700);
onBeforeUnmount(() => {
  intro.stop()
  console.log('desktop 组件实例被卸载之前调用')
  clearTimeout(set1)
})
const router = useRouter()
const route = useRoute()
function entryApp() {
  play()
  router.push(route.query.path)
}
</script>

<template>
  <div class="desktop-bg bg-cover h-full ">
    <div class=" no-click "></div>
    <div class="box">
      <div class="bg-cover app-call-bg mokuai" />
      <div class="bg-cover app-message-bg mokuai" />
      <div class="bg-cover app-brower-bg mokuai" />
      <div class="bg-cover app-camera-bg mokuai" />
      <div id="entryApp" class="bg-cover app-cliper-bg col-start-3 mokuai" @click.stop="entryApp" />
    </div>
  </div>
</template>

<style scoped>
.no-click {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 99;
}
@media screen and (min-width:440px) {

  .mokuai {
    width: 62px;
    height: 62px;
  }

  .box {
  padding-top: 50px;
  gap: 50px;
  align-items: stretch;
  place-content: start;
  width: fit-content;
  margin:0 auto;
  grid-template-rows: repeat(2, 50px);
  grid-template-columns: repeat(4, 50px);
  display: grid;
}
}
@media screen and (max-width:440px) {
  .box {
  padding-top: 5em;
  gap: 2em;
  align-items: stretch;
  place-content: start;
  width: fit-content;
  margin: auto;
  grid-template-rows: repeat(2, 16vw);
  grid-template-columns: repeat(4, 16vw);
  display: grid;
}
}


.desktop-bg {
  background-image: url('@/assets/common/desktop_bg.jpg');
}

.app-call-bg {
  background-image: url('@/assets/common/app_call.png');

}

.app-message-bg {
  background-image: url('@/assets/common/app_message.png');
}

.app-brower-bg {
  background-image: url('@/assets/common/app_brower.png');
}

.app-camera-bg {
  background-image: url('@/assets/common/app_camera.png');
}

.app-cliper-bg {
  background-image: url('@/assets/common/app_cliper.png');
}
</style>
